{% stylesheet %}
  {%- comment -%}Advert 信息之间的间距为 1em，最后一个正常 {%- endcomment -%}
  .payment-icons>img {
    margin-bottom: .25rem;
    margin-right: .25rem;
  }
  .payment-icons {
    margin-right: -.25rem;
  }
{% endstylesheet %}
{%- liquid
  assign current_variant = product.selected_or_first_available_variant
-%}

{% comment %} 在购买页中以变体图片为节点，将产品图分组，形如 A1 $$ B1;;B2;;B3 $$ C1;;C2 {% endcomment %}
{%- capture image_list -%}
  {%- for product_image in product.images -%}
    {%- if product_image.variants.first.id != blank -%}
      {%- comment -%} If product image is attached to a variant, image.attached_to_variant not working! {%- endcomment -%}
      {%- unless forloop.first -%}$${%- endunless -%}
      {{ product_image.id }}::{{ product_image.position }}||{{ product_image.alt }}
    {%- else -%}
      {%- unless forloop.first -%};;{%- endunless -%}{{ product_image.position }}||{{ product_image.alt }}
    {%- endif -%}
  {%- endfor -%}
{%- endcapture -%}

<div class="purchase-section as-purchase-section mb-6 mb-lg-7 mt-0 mt-lg-7 as-main-product-v1-container">
  <input class="as-main-product-v1-script" type="hidden" value="{{ 'main-product-v1.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  <div class="container">
    <div class="row gx-lg-7">
      <div class="col-12 col-lg-8">
        <div class="sticky-top-section">
        {%- for variant in product.variants -%}
          {% capture variant_image_strs %}{%- render 'get-product-images-by-variant-id', image_list: image_list, target_variant: variant, all_images: product.images -%}{% endcapture %}
          {% assign variant_image_strs = variant_image_strs | split: ';;' %}
          <div class="{% if variant_image_strs.size > 1 %}gallery-wrapper{% endif %} as-gallery-wrapper {% if current_variant.id != variant.id %}d-none{% endif %}" data-variant-id="{{ variant.id }}">
            <div class="row g-3 flex-nowrap flex-lg-wrap gallery">
              {%- for variant_image_str in variant_image_strs -%}
                {%- liquid 
                  assign variant_image = variant_image_str | split: '||'
                  assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                  assign variant_image_alt = variant_image[1]
                -%}
                {%- assign image = product.images[variant_image_pos] -%}
                  <div class="col-12 {% if variant_image_strs.size > 1 %}col-lg-6{% endif %} gallery-item-wrapper">
                    <figure class="mt-3 mt-lg-0 ratio ratio-1x1 mb-0">
                      {% if image != blank %}
                        <picture>
                          <source media="(max-width: 575px)" 
                            srcset="{{ image | img_url: '375x375' }} 1x, {{ image | img_url: '375x375', scale: 2 }} 2x" />
                          <img class="h-100 w-100 object-fit-cover" width="auto" height="auto"
                            srcset="{{ image | img_url: '600x600' }} 1x, {{ image | img_url: '600x600', scale: 2 }} 2x"
                            src="{{ image | img_url: 'master' }}"
                            loading="lazy"
                            alt="{{ variant_image_alt | escape }}">
                        </picture>
                      {% else %}
                        <picture>
                          <div class="object-fit-cover img-placeholder h-100">
                            {{ 'image' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                          </div>
                        </picture>
                      {% endif %}
                    </figure>   
                  </div>
              {%- endfor -%}
            </div>
          </div>
        {% endfor %}
        </div>
      </div>
      <div class="col-12 col-lg-4">
        {% render 'product-info', showNotifyMe: section.settings.show_notify_me, subscribe_tag: section.settings.subscribe_tag, hiddenAddToCart: section.settings.hide_add_to_cart %}
        {% render 'notify-me', showNotifyMe: section.settings.show_notify_me, heading: section.settings.notify_me_heading, text: section.settings.notify_me_text, note: section.settings.notify_me_note %}
      </div>
    </div>
  </div>
</div>
{% render 'structured-product' %}
{% javascript %}
  (function() {
    var $url = document.querySelector('.as-main-product-v1-script')
    if (!window.productV1 && $url && $url.dataset.designMode !== 'yes') {
      window.productV1 = $url.value
      var $script = document.createElement('script')
      $script.src = window.productV1
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}

{% schema %}
  {
    "name": "Product",
    "tag": "section",
    "class": "main-product-v1 as-main-product-v1",
    "settings": [
      {
        "type": "header",
        "content": "Add to cart"
      },
      {
        "type": "checkbox",
        "id": "hide_add_to_cart",
        "label": "hide add to cart",
        "default": false
      },
      {
        "type": "header",
        "content": "Notify me"
      },
      {
        "type": "checkbox",
        "id": "show_notify_me",
        "label": "Show notify me",
        "default": false
      },
      {
        "type": "text",
        "id": "notify_me_heading",
        "label": "Heading",
        "default": "Nofify me if it arrives"
      },
      {
        "type": "richtext",
        "id": "notify_me_text",
        "label": "Text",
        "default": "<p>Thanks for your interest. Please leave your email and we will send you a notification as soon as we have the item in stock.</p>"
      },
      {
        "type": "richtext",
        "id": "notify_me_note",
        "label": "Note",
        "default": "<p>You can opt-out at any time. See our Privacy Policy and Terms .</p>"
      },
      {
        "type": "text",
        "id": "subscribe_tag",
        "label": "Subscribe tag",
        "default": "notify_me",
        "info": "Separate each tag with an English comma"
      }
    ],
    "blocks": [
      {
        "type": "title",
        "name": "Title",
        "limit": 1
      },
      {
        "type": "price",
        "name": "Price",
        "limit": 1
      },
      {
        "type": "paypal",
        "name": "Paypal message",
        "limit": 1
      },
      {
        "type": "variant_picker",
        "name": "Variant picker",
        "limit": 1,
        "settings": [
          {
            "type": "radio",
            "id": "type",
            "label": "Type",
            "options": [
              {
                "value": "button",
                "label": "Button"
              },
              {
                "value": "dropdown",
                "label": "Dropdown"
              }
            ],
            "default": "button"
          },
          {
            "type": "checkbox",
            "id": "enable_color_swatches",
            "label": "Enable color swatches",
            "default": false
          },
          {
            "type": "text",
            "id": "swatch_option_name",
            "label": "Swatch option name",
            "info": "Enter the name of the product option you wish to turn into color swatches (i.e, Color)"
          },
          {
            "type": "textarea",
            "id": "color_swatches_rule_configuration",
            "label": "Color swatches rule configuration",
            "info": "Format is \"option value:color value\",Each rule must be separated by a semicolon(\";\"). \",for example:\"Light grey:#e0dddd;Pink:#f127b6;Dark yellow:dark-yellow.png;\""
          },
          {
            "type": "textarea",
            "id": "options_marker",
            "label": "Marker",
            "info": "Format is \"option value:marker_text:marker_background_color\",Each rule must be separated by a semicolon(\";\"). \",for example:\"Rokid Max AR Glasses:NEW:#007AFF;Black:HOT:#FF003D;\""
          }
        ]
      },
      {
        "type": "quantity_selector",
        "name": "Quantity selector",
        "limit": 1
      },
      {
        "type": "buy_buttons",
        "name": "Buy buttons",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_dynamic_checkout_buttons",
            "label": "Show dynamic checkout buttons",
            "default": true,
            "info": "Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. [Learn more](https://help.shopify.com/en/manual/online-store/themes/dynamic-checkout)"
          }
        ]
      },
      {
        "type": "description",
        "name": "Description",
        "limit": 1
      },
      {
        "type": "share",
        "name": "Share",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "A page title and description are included with the preview image. [Learn more](https://help.shopify.com/en/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store)"
          },
          {
            "type": "paragraph",
            "content": "If you include a link in social media posts, the page’s featured image will be shown as the preview image. [Learn more](https://help.shopify.com/en/manual/online-store/images/showing-social-media-thumbnail-images)"
          }
        ]
      },
      {
        "type": "payment_methods",
        "name": "Payment methods",
        "limit": 1
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "image_picker",
            "id": "advert_icon",
            "label": "Icon"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text",
            "default": "<p>Tell a unique detail about this product.</p>"
          },
          {
            "type": "header",
            "content": "Advanced settings"
          },
          {
            "type": "select",
            "id": "text_type",
            "label": "Text type",
            "options": [
              {
                "value": "uppercase",
                "label": "Uppercase"
              },
              {
                "value": "body",
                "label": "Body"
              },
              {
                "value": "footnote",
                "label": "Footnote"
              }
            ],
            "default": "uppercase"
          },
          {
            "type": "select",
            "id": "margin_bottom",
            "label": "Space bottom",
            "options": [
              {
                "value": "mb-1",
                "label": "Small"
              },
              {
                "value": "mb-2",
                "label": "Medium"
              },
              {
                "value": "mb-5",
                "label": "Large"
              }
            ],
            "default": "mb-5"
          }
        ]
      } 
    ],
    "default": {
      "blocks": [
        {
          "type": "title"
        },
        {
          "type": "price"
        },
        {
          "type": "variant_picker"
        },
        {
          "type": "buy_buttons"
        }
      ]
    }
  }
{% endschema %}


